<template>
  <div>
    <h1>User Likes</h1>
    <div class="scroll-container">
      <ul v-if="likes && likes.length">
        <li v-for="like in likes" :key="like.id" class="like-item">

          <Card :resourceId="like.resourceId"
                @click="playVideo(like.resourceId);"/>
        </li>
      </ul>
      <p v-else>用户没有点赞记录。</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useUserStore } from "@/store/useUserStore"; // 使用用户状态存储
import axios from 'axios';
import Card from "@/components/CardOne.vue";
import {useRouter} from "vue-router"; // 引入axios

export default {
  components: { Card },
  setup() {
    const userStore = useUserStore();
    const userId = ref(userStore.userInfo?.id); // 获取用户 id
    const likes = ref([]); // 用于存储用户的点赞列表

    // 获取用户的点赞列表
    const fetchUserLikes = async () => {
      try {
        const response = await axios.get(`http://localhost:8000/likes/${userId.value}`);
        likes.value = response.data.data; // 将获取的点赞列表存储在 likes 中
        console.log('User likes:', likes.value);
      } catch (error) {
        console.error('Error fetching user likes:', error);
      }
    };
    const playVideo = (id) => {
      console.log("播放视频 ID:", id);
      // 这里可以放入实际的播放逻辑，例如跳转到视频播放器等
      // this.$router.push({ name: 'videoPlayer', params: { resourceId: id } });
      const router = useRouter(); // 获取 router 实例
      router.push({ name: 'videoPlayer', params: { resourceId: id } }); // 使用 router 实例
    };
    // 组件挂载时获取用户点赞列表
    onMounted(() => {
      if (userId.value) {
        fetchUserLikes();
      } else {
        console.warn('User ID is not defined');
      }
    });

    return { likes,playVideo }; // 返回 likes 让模板可以访问
  },
};
</script>

<style scoped>
.scroll-container {
  max-height: 560px; /* 设置容器最大高度 */
  overflow-y: auto; /* 设置垂直滚动条 */
  border: 1px solid #ccc; /* 添加边框 */
  padding: 10px; /* 添加内边距 */
  border-radius: 5px; /* 添加圆角 */
}

ul {
  list-style-type: none;
  padding: 0;
}

.like-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}
</style>
